<template>
  <div id="app">
    <div id="myholder"></div>
    <hello-world />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import * as joint from 'jointjs'
// 显示网格背景颜色需要引入样式
import 'jointjs/dist/joint.css'
export default {
  components: {
    HelloWorld
  },
  name: 'App',
  data: function () {
    return {
      active: true
    }
  },
  mounted() {

    // 图形模型
    let graph = new joint.dia.Graph

    // 视图
    // eslint-disable-next-line no-unused-vars
    let paper = new joint.dia.Paper({
        el: document.getElementById('myholder'),
        model: graph,
        width: 600,
        height: 300,
        gridSize: 10, // 网格大小
        drawGrid: true, // 显示网格
        background: {
            color: 'rgba(0, 255, 0, 0.3)'
        }
    })

    // 纸张缩放
    // paper.scale(0.5, 0.5)

    // 纸张平移
    // paper.translate(50, 50)

    let rect = new joint.shapes.standard.Rectangle()
    rect.position(100, 30) // 设置元素原点（左上角）相对于纸张坐标系的位置（考虑纸张缩放和其他变换）
    rect.resize(100, 40) // 设置元素的尺寸
    rect.attr({ // 元素样式
        body: {
            fill: 'blue'
        },
        label: {
            text: 'Hello',
            fill: 'white'
        }
    })
    rect.addTo(graph) // 将元素添加到图形中，以便可以呈现

    let rect2 = rect.clone() // 克隆现有元素，包括其位置、尺寸和属性
    rect2.translate(300, 0) // 沿两个坐标轴将元素移动指定的距离。也有缩放和 旋转元素的方法
    rect2.attr('label/text', 'World!')
    rect2.addTo(graph)

    let link = new joint.shapes.standard.Link()
    link.source(rect)
    link.target(rect2)
    link.addTo(graph)

    let rect3 = new joint.shapes.standard.Rectangle()
    rect3.position(100, 130)
    rect3.resize(100, 40)
    rect3.attr({
      body: {
        fill: '#E74C3C',
        rx: 20,
        ry: 20,
        strokeWidth: 0
      },
      label: {
        text: 'jointjs',
        fill: '#ECF0F1',
        fontSize: 16,
        fontVariant: 'small-caps'
      }
    })
    rect3.addTo(graph)

    let rect4 = new joint.shapes.standard.Rectangle()
    rect4.position(400, 130)
    rect4.resize(100, 40)
    rect4.attr({
      body: {
        fill: '#8E44AD',
        strokeWidth: 0
      },
      label: {
        text: 'hahaha',
        fill: 'black'
      }
    })
    rect4.addTo(graph)

    let link2 = new joint.shapes.standard.Link()
    link2.source(rect4)
    link2.target(rect3)
    link2.attr({
      line: {
        stroke: 'orange'
      }
    })
    link2.labels([{
      attrs: {
        text: {
          text: 'Hello'
        }
      }
    }])
    link2.addTo(graph)
  }
}
</script>

<style lang="scss">
 #myholder {
   border: 1px solid #444;
 }
</style>
